<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>simple chat room</title>

    <!--Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>

    <!--Bootstrap.min css-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>
<div class="container" >
    <div class="row clearfix">

        <div style="text-align: center;" class="col-md-12 column">

            <h3 style="text-align: center;">简易聊天室</h3>
            <label id="usr">欢迎您{{nickname}}</label>
        </div>
    </div>
</div>

<div id="rooms" class="container" style="padding-top:100px">
    <div class="row clearfix">
        <div class="col-md-4 column"></div>
        <div class="col-md-2 column">
            <input v-model="queryText" placeholder="请输入房间名" />
        </div>
        <div class="col-md-2 column">
            <input type="button" value="search" v-on:click="query"><input type="button" value="create" v-on:click="create">
        </div>
        <div class="col-md-2 column">

        </div>
        <div class="col-md-2 column"></div>

    </div>
    <div style="height:100px;max-height: 100px;overflow-y: auto;overflow-x:hidden;">
    <template v-for="room in rooms">
    <div class="row clearfix">
        <div class="col-md-4 column"></div>
        <div class="col-md-2 column">
            <label>房间名</label>
        </div>
        <div class="col-md-2 column">
           <label>{{room.title}}({{room.member}})</label>
        </div>
        <div class="col-md-1 column">
            <a href="#" v-on:click="join(room.id)">join</a>
        </div>
        <div class="col-md-3 column"></div>

    </div>
    </template>
    </div>



</div>
<div class="container" id="chatarea" style="height:400px;max-height: 400px;overflow-y: auto;overflow-x:hidden;">
    <div class="col-md-12 column">
    <template v-for="line in lines">
        <p>{{line}}</p>
    </template>
    </div>
</div>
<div class="container" id="sendarea">
    <div class="col-md-12 column">
    <input style="width:1000px;" v-model="message" />
    <input type="button" value="发送" v-on:click="send" >
    </div>
</div>
<!--Jquery.min js-->
<script src="js/jquery.min.js"></script>


<!--Bootstrap.min js-->
<script src="js/bootstrap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/webchat.js"></script>
<script>
    var g_usr;
    $(function(){
        debugger
        webchat.getuser(function(usr){
            g_usr=usr;

             new Vue({
                el:"#usr",
                data:g_usr
            });
        });


    });

			var g_svr="http://localhost:8083"
			var User={
				User:"3",
				Pwd:"1"
			}
			var roomsdata={
			    rooms:[],
                queryText:""
            }
            var chatareaData={
                lines:[""]
            }
      function dologin(){


      }
      function queryRooms(){
            webchat.queryRoom(roomsdata.queryText,function (r) {
                roomsdata.rooms = r;
            });
        }
			new Vue({
				el: '#rooms',
				data: roomsdata,
				methods:{
					query:function () {
					    queryRooms();


					},
					create:function(){
                        webchat.createRoom(roomsdata.queryText,function (r) {
                            if(r==null){
                                alert("创建房间失败!");
                                return;
                            }
                            roomsdata.rooms = [r];
                        });

					},
                    join:function (roomid) {
                        webchat.joinRoom(roomid,chatareaData,function(msg){
                            chatareaData.lines.push(msg);

                        })
                    }
				}
				});

			var vm= new Vue({
                el:"#chatarea",
                data:chatareaData,
                methods:{
                    speak:function (txt) {
                        webchat.speak(txt)
                    }
                }
            });
            vm.$watch('lines', function(nval, oval) {
                 let ele = document.getElementById('chatarea');
                ele.scrollTop = ele.scrollHeight;
            });

            var sendareaData={
                message:""
            }
            new Vue({
                el:"#sendarea",
                data:sendareaData,
                methods:{
                    send:function(){
                        if(sendareaData.message.trim()!="")
                            webchat.sendMessage(sendareaData.message);
                        sendareaData.message="";
                    }
                }
            });


</script>


</body>
</html>